<template>
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<!-- header部分 -->
		<header>
			<p>个人中心</p>
		</header>
	
		<!-- 个人列表部分 -->
		<ul class="user">
		    <li class="userInfo-login" v-if="user != null">
		        <div class="userInfo-login-left">
		            <div class="icon">
		                <i class="fa fa-user-circle-o"></i>
		            </div>
		            <div class="text">
		                <p class="userName">{{ user.userName }}</p>
		                <p class="userId">{{ user.userId }}</p>
		            </div>
		        </div>
		        <div class="userInfo-login-right">
		            <i class="fa fa-cog" @click="toEditUserInfo()"></i>
		        </div>
		    </li>
		    <li class="userInfo-logout" v-if="user == null" @click="login()">
		        <div class="icon">
		            <i class="fa fa-user-circle"></i>
		        </div>
		        <div class="text">
		            <p>未登录</p>
		        </div>
		    </li>
			<li class="credit" v-if="user != null">
			    <i class="fa fa-trophy"></i>
			    <p>积分</p>
			    <p>{{ user.userCredit }}</p>
			</li>
		    <div class="updateUserAddress" v-if="user != null" @click="toUserUserAddress()">
		        <h5>默认送货地址：</h5>
		        <div class="order-info-address">
		            <p>{{ deliveryaddress != null ? deliveryaddress.address : '请选择送货地址' }}</p>
		            <i class="fa fa-angle-right"></i>
		        </div>
		        <p v-if="deliveryaddress == null"></p>
		        <p v-if="deliveryaddress != null">{{ deliveryaddress.contactName }}{{ deliveryaddress.contactSex == 1 ? "先生" : "女士" }} {{ deliveryaddress.contactTel }}</p>
		    </div>
		    
		    
		    <!-- 按钮容器 -->
		        <div class="button-container" v-if="user != null">
		            <button class="updatePassword" @click="toEditUserPassword()">修改密码</button>
		            <button class="logout" @click="logout()">退出登录</button>
		        </div>
		        
		        <div class="button" v-if="user == null">
		            <button class="login" @click="login()">登录</button>
		        </div>
		</ul>

	
		<!--底部菜单部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue'
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	export default{
		name:'PersonalCenter',
		setup(){
			const currentInstance = getCurrentInstance();
			const router = useRouter();
			const route = useRoute();
			const user = ref({});
			const deliveryaddress = ref({});
			const goBack = () => {
				router.go(-1);
			};
			
			const logout = () => {
							if(!confirm("确定要退出登录？")){
								return;
							}
							currentInstance.appContext.config.globalProperties.$removeSessionStorage('user');
							location.reload();
						}
			const login = () => {
				router.push({path:'/loginr'});
			}
			const toEditUserInfo = () => {
				router.push({name:'EditUserInfo'});
			}
			const toEditUserPassword = () => {
				router.push({name:'EditUserPassword'});
			}
			const toUserUserAddress = () => {
				router.push({name:'UserAddress',params:{businessId:0}});
			}
			onMounted(() => {
				user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
				if(user.value!=null){
					deliveryaddress.value = currentInstance.appContext.config.globalProperties.$getLocalStorage(user.value.userId);
				}
			});
			
			return{
				user,
				goBack,
				logout,
				login,
				toEditUserInfo,
				toEditUserPassword,
				toUserUserAddress,
				deliveryaddress
			}
		},
		components:{
			Footer
		}
	}
</script>

<style scoped>
    .wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .back-icon {
        width: 12vw;
        height: 12vw;
        background-color: #0097FF;
        color: #FFFFFF;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1001;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #FFFFFF;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .user {
        width: 100%;
        margin-top: 12vw;
        margin-bottom: 56px; /* 预留底部导航栏的空间 */
    }

    .user li {
        width: 100%;
        box-sizing: border-box;
        padding: 2.5vw;
        border-bottom: solid 1px #DDD;
        user-select: none;
        display: flex;
        align-items: center;
    }

    .updateUserAddress {
        width: 100%;
        margin-top: 0;
        background-color: #FFFFFF;
        box-sizing: border-box;
        border-bottom: solid 1px #DDD;
        padding: 2vw;
    }

    .updateUserAddress h5 {
        color: #666;
    }

    .order-info-address {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        user-select: none;
        cursor: pointer;
        margin: 1vw 0;
    }

    .order-info-address p {
        width: 90%;
        font-size: 4vw;
    }

    .order-info-address i {
        font-size: 6vw;
    }

    .userInfo-login {
        justify-content: space-between;
    }

    .userInfo-login .userInfo-login-left {
        display: flex;
        align-items: center;
    }

    .userInfo-login .userInfo-login-left .icon {
        width: 14vw;
        height: 14vw;
        font-size: 10vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .userInfo-login .userInfo-login-left .text {
        box-sizing: border-box;
        padding: 2.5vw;
    }

    .userInfo-login .userInfo-login-left .text .userName {
        font-size: 5vw;
    }

    .userInfo-login .userInfo-login-left .text .userId {
        font-size: 4vw;
        color: #666;
    }

    .userInfo-login .userInfo-login-right {
        width: 14vw;
        height: 14vw;
        font-size: 8vw;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .userInfo-logout {
        cursor: pointer;
    }

    .userInfo-logout .icon {
        width: 14vw;
        height: 14vw;
        font-size: 10vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .userInfo-logout .text {
        box-sizing: border-box;
        padding: 2.5vw;
        font-size: 5vw;
    }

    /* 积分部分 */
    .credit {
        justify-content: space-between;
        padding: 2.5vw;
        border-bottom: solid 1px #DDD;
        user-select: none;
        display: flex;
        align-items: center;
    }
    
    .credit p:first-child {
        font-size: 4.5vw;
        color: #666;
    }
    
    .credit p:last-child {
        font-size: 4.5vw;
        color: #333;
        font-weight: bold;
    }
    
    .credit i {
        font-size: 5vw;
        color: #0097FF;
        margin-right: 1vw;
    }
    
    /* 按钮容器 */
    .button-container {
        width: 100%;
        box-sizing: border-box;
        padding: 60vw 3vw 0 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
		margin-bottom: 56px;
    }
    
    /* 修改密码按钮 */
    .updatePassword {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #fff;
        border-radius: 8px;
        border: none;
        outline: none;
        margin-top: 2vw;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background: linear-gradient(to right, #38CA73, #28c35a);
        text-align: center;
        line-height: 10vw;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .updatePassword::before {
        content: '';
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transition: top 0.3s ease;
    }
    
    .updatePassword:hover::before {
        top: 0;
    }
    
    .updatePassword:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
    
    /* 退出登录按钮 */
    .logout {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #fff;
        border-radius: 8px;
        border: none;
        outline: none;
        margin-top: 2vw;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background: linear-gradient(to right, orangered, darkorange);
        text-align: center;
        line-height: 10vw;
        cursor: pointer;
        position: relative;
        overflow: hidden;
		margin-bottom: 25px;
    }
    
    .logout::before {
        content: '';
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transition: top 0.3s ease;
    }
    
    .logout:hover::before {
        top: 0;
    }
    
    .logout:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
    .button {
        width: 100%;
        box-sizing: border-box;
        padding: 60vw 3vw 0 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .button .logout,
    .button .login {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #fff;
        border-radius: 8px; /* 加大圆角半径 */
        border: none;
        outline: none;
        margin-top: 2vw; /* 按钮之间增加间距 */
        transition: all 0.3s ease; /* 添加过渡效果 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    }
    
    .button .logout:hover,
    .button .login:hover {
        transform: translateY(-2px); /* 悬停时轻微上移 */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 增加阴影 */
    }
    
    .button .logout {
        background-color: orangered;
    }
    
    .button .login {
        background-color: #38CA73;
    }
    
    /* 按钮之间的间距 */
    .button .login {
        margin-top: 4vw; /* 调整间距 */
    }
    

    footer.navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 56px; /* 调整为实际导航栏高度 */
        background-color: #f8f9fa;
        z-index: 1002;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>